<script setup lang="ts">
import type { BannerItem } from '@/types/home'
import { ref } from 'vue'

const activeIndex = ref(0)

// 当 Swiper 下标发生变化时触发的事件(用于轮播图指示点), UniHelper为Uniapp提供的事件类型
const onChange: UniHelper.SwiperOnChange = (ev) => {
    // ! 非空断言, 主管上排除空值的情况
    activeIndex.value = ev.detail!.current
}

// 使用props接收父组件传递的数据
defineProps<{
    list: BannerItem[]
}>()

</script>

<template>
    <view class="carousel">
        <swiper :circular="true" :autoplay="true" :interval="3000" @change="onChange">
            <swiper-item v-for="item in list" :key="item.id">
                <navigator url="/pages/index/index" hover-class="none" class="navigator">
                    <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
                </navigator>
            </swiper-item>
        </swiper>
        <!-- 指示点 -->
        <view class="indicator">
            <text v-for="(item, index) in list" :key="item.id" class="dot"
                :class="{ active: index === activeIndex }"></text>
        </view>
    </view>
</template>

<style lang="scss">
:host {
    display: block;
    height: 280rpx;
}

/* H5端默认开启scoped样式隔离, 导致组件基础样式无效 */
@import '@/components/styles/XtxSwiper.scss';
</style>